import React, { useState } from 'react';

import SiderC from './siders';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Layout } from 'antd';
import Breadcrumbs from '@/components/breadcrumb';
import Login from '@/pages/login';
import { useSelector } from 'umi';

import '../models/isLogin';

import styles from './index.less';

const { Header, Content } = Layout;

const App: React.FC = (props) => {
  const [collapsed, setCollapsed] = useState(false);
  const isLogin =
    useSelector((state: any) => state.isLogin.isLogin) || !!localStorage.getItem('user_login');

  const changeCollapsed = (): void => {
    setCollapsed(!collapsed);
  };
  return (
    <>
      {isLogin ? (
        <Layout className={styles.layheight}>
          <SiderC collapsed={collapsed}></SiderC>
          <Layout className="site-layout">
            <Header style={{ padding: 0 }}>
              <div onClick={changeCollapsed}>
                {!collapsed ? (
                  <MenuFoldOutlined className={styles.MenuFoldOutlined} />
                ) : (
                  <MenuUnfoldOutlined className={styles.MenuFoldOutlined} />
                )}
              </div>
            </Header>
            <Content
              style={{
                margin: '0px 16px',
                padding: 24,
                minHeight: 280,
                overflow: 'scroll',
              }}
            >
              <Breadcrumbs></Breadcrumbs>
              {props.children}
            </Content>
          </Layout>
        </Layout>
      ) : (
        <Login></Login>
      )}
    </>
  );
};

export default App;
